<template>
	<div class="tts-broadcast-warpper">
		<el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane label="TTS辅助播报" name="ttsbroadcast">
				<el-button type="primary" @click="addTtsBroadcast" :disabled="!canEdit" size="mini">添加</el-button>
				<br />
				<br />
				<TtsBroadcastTable @modifyTtsBroadcast="modifyTtsBroadcast" @delTtsBroadcast="delTtsBroadcast" :tableData="tableData"></TtsBroadcastTable>
				<br />
				<page-size :pages="ttsPages" @changeCurrentPage="changeCurrentPage" @changePageSize="changePageSize"></page-size>
				<br />
				<br />
			</el-tab-pane>
		</el-tabs>
		<div class="btn-box">
			<el-button type="primary" @click="back">返回</el-button>
		</div>
		<TtsBroadcastModal
			v-if="showTtsBroadcastModal"
			:mode="mode"
			:showTtsBroadcastModal="showTtsBroadcastModal"
			@submitTtsBroadcast="submitTtsBroadcast"
			@cancelSubmit="cancelSubmit"
			:dialogData="dialogData"
		></TtsBroadcastModal>
		
	</div>
</template>

<script>
import TtsBroadcastTable from './TtsBroadcastTable.vue';
import TtsBroadcastModal from './TtsBroadcastModal.vue';
import PageSize from '@/views/components/PageSize.vue';
import { getTTSItemsBySceneId, addTTSItemBySceneId, updateTTSItem, deleteTTSItem } from '../../../api/api';
export default {
	components: {
		TtsBroadcastTable,
		TtsBroadcastModal,
		PageSize
	},
	data() {
		return {
			canEdit: false,
			activeName: 'ttsbroadcast',
			showTtsBroadcastModal: false,
			dialogData: {},
			mode: 'add',
			tableData: [],
			ttsPages: {
				total: 0,
				page: 1,
				pageSize: 10
			},
			sceneId: ''
		};
	},
	mounted() {
		this.sceneId = this.$route.params.id;
		this.refreshTTSItems();
		this.canEdit = this.$route.query.canEdit === 'true';
	},
	methods: {
		async refreshTTSItems() {
			try {
				const { data } = await getTTSItemsBySceneId(this.sceneId, this.ttsPages);
				if (data.code === 200) {
					this.tableData = data.data.data;
					this.ttsPages.total = data.data.count;
				}
			} catch (error) {
				this.$message.error('获取TTS辅助播报列表失败');
			}
		},
		async submitTtsBroadcast(data) {
			this.dialogData = data;
			this.operaTTSItem(data);
		},
		async operaTTSItem(content) {
			if (this.mode === 'add') {
				try {
					await addTTSItemBySceneId(this.sceneId, content);
					this.refreshTTSItems();
					this.showTtsBroadcastModal = false;
				} catch (error) {
					console.log('addTTSItemBySceneId failed:', error);
					if (error.code == '6009') {
						this.showTtsBroadcastModal = false;
						this.$message.error(`业务场景启用中，无法进行操作！`);
					} else if (error.code == '1002') {
						this.$message.error(`标题已存在！`);
					} else {
						this.showTtsBroadcastModal = false;
						this.$message.error('添加TTS辅助播报列表失败');
					}
				}
			} else {
				try {
					await updateTTSItem(this.sceneId, this.dialogData.id, content);
					this.$message.success('修改成功');
					this.refreshTTSItems();
					this.showTtsBroadcastModal = false;
				} catch (error) {
					if (error.code == '6009') {
						this.showTtsBroadcastModal = false;
						this.$message.error(`业务场景启用中，无法进行操作！`);
					} else if (error.code == '1002') {
						this.$message.error(`标题已存在！`);
					} else {
						this.showTtsBroadcastModal = false;
						this.$message.error('修改TTS辅助播报列表失败');
					}
				}
			}
		},
		cancelSubmit() {
			this.showTtsBroadcastModal = false;
		},
		addTtsBroadcast() {
			this.mode = 'add';
			this.dialogData = {};
			this.showTtsBroadcastModal = true;
		},
		back() {
			this.$router.go(-1);
		},
		modifyTtsBroadcast(data) {
			this.mode = 'modify';
			this.dialogData = data;
			this.showTtsBroadcastModal = true;
		},
		async delTtsBroadcast(data) {
			try {
				await deleteTTSItem(this.sceneId, data.id);
				this.$message.success('删除成功');
				if (this.tableData.length === 1 && this.ttsPages.page > 1){
					this.ttsPages.page -= 1;
				}
				this.refreshTTSItems();
			} catch (error) {
				switch (error.code) {
					case '1002':
						this.$message.warning('请先解除在AI工作流中该TTS辅助播报的配置再进行删除');
						break;
					case '6009':
						this.$message.error(`业务场景启用中，无法进行操作！`);
						break;
					default:
						this.$message.warning('删除TTS辅助播报失败！');
						break;
				}
			}
		},
		changeCurrentPage(page){
			this.ttsPages.page = page;
			this.refreshTTSItems();
		},
		changePageSize(pageSize){
			this.ttsPages.pageSize = pageSize;
			this.refreshTTSItems();
		}
	}
};
</script>

<style lang="less" scoped>
.tts-broadcast-warpper {
	position: relative;
	.btn-box {
		position: absolute;
		top: 0;
		right: 20px;
		.el-button {
			background: #6384fe;
			border-radius: 4px;
			line-height: 3px;
		}
		.el-button[disabled] {
			background: #a0cfff !important;
		}
	}
}
</style>
